<!DOCTYPE html>
<html lang="en">
<head>
  <!--  问卷详情-->
  <meta charset="UTF-8">
  <title>问卷详情</title>
  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
  <script src="../js/jquery.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <script src="../js/echarts.min.js"></script>
  <link href="css/anniu.css" rel="stylesheet">
  <style>
    li{
      margin-top: 8px;
    }
  </style>
</head>
<body>
<div class="container-fluid">
  <!--        标题头部-->
  <div class="row">
    <div class="col-md-2">
      <a href="Voting.html" class="button gray"><span class="glyphicon glyphicon-arrow-left"></span></a>
    </div>
    <div class="col-md-8">
      <h1  id="h1biaoti" style="font-weight: bolder;text-shadow:5px 5px 5px #17a2b8;text-align: center "></h1>

    </div>
    <div class="col-md-2">
    </div>
  </div>

  <!--        详情-->
  <div class="row" style="font-size: 25px">
    <div class="col-md-6 col-md-offset-3">
     <table id="table" class="table table-hover table-striped">
        <tr>
          <td>题目</td>
          <td>查看投票详情</td>
        </tr>
     </table>
    </div>
  </div>
</div>
<!--模态框-图形化-->
<div style="font-size: 25px;"  class="modal fade" id="motak3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h1>标题:<span id="btname"></span>---图形化数据展示 <button id="ckxq" class="btn btn-warning">查看投票详情</button>
        </h1>
      </div>
      <div class="modal-body">
        <div class="col-md-7">
          <span id="div1" style="width: 400px;height: 500px; "></span>
        </div>
        <div class="col-md-5">
                <span id="div" style="width: 400px;height:800px;">
                    <h1>总票数：<span id="sum"></span>票</h1><br>
                    <h2>赞成票：<span id="zcsum"></span>票</h2><br>
                    <h2>反对数：<span id="fdsum"></span>票</h2><br>
                    <h1>结果：<span style="color: red" id="jieguo"></span></h1>
                    <br><br>
                </span>
        </div>
      </div>
      <div class="modal-footer">
        <button  class="btn btn-info"  data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!--详细列表-->
<div style="font-size: 25px;"  class="modal fade" id="motak4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h1>投票详细信息>></h1>
      </div>
      <div class="modal-body" style="height:500px;">
        <table class="table table-hover" id="tabletoupiaolist">
          <tr class="active">
            <td>题目</td>
            <td>投票人姓名</td>
            <td>电话</td>
            <td>投票项</td>
          </tr>
        </table>
      </div>
      <div class="modal-footer">
        <button  class="btn btn-info"  data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

</body>
<script type="text/javascript">
  let sid;
  let ob = localStorage.getItem("vote")
  let obj =  JSON.parse(ob)
  console.log(obj)
  $("#h1biaoti").html(obj.vote_vtitled)
    $.ajax({
      url:"gettimeByvid",
      type:"get",
      dataType:"json",
      data:{"vid":obj.vote_vid},
      success:function (data){
        console.log(data)
        for(let obj of data){
          let tr=  document.createElement("tr")
          let  td1=document.createElement("td")
          td1.innerHTML=obj.Subject_scontent
          let  td2=document.createElement("td")
          let  a=document.createElement("a")
          $(a).attr("class","button orange")
          $(a).html("查看")
          $(a).on("click",function (){
            sid=obj.Subject_sid
               $("#motak3").modal("show")
               let  zc="0";
               let fd="0";
                //获取当前题目的投票信息
                $.ajax({
                  url:"gettoupiao",
                  type:"post",
                  dataType:"json",
                  data:{sid:obj.Subject_sid},
                  success:function (data){
                      console.log(data)
                      for(let obj of data){
                         if(obj.BAnswer_boolean=="t"){
                            zc=obj.sum
                          }else if(obj.BAnswer_boolean=="f"){
                            fd=obj.sum
                         }
                      }
                      let zcint = parseInt(zc)
                    let fdint = parseInt(fd)
                    console.log(zcint)
                    console.log(fdint)
                    tuxinghua(zcint,fdint)

                    $("#sum").html(zcint+fdint)
                    $("#zcsum").html(zcint)
                    $("#fdsum").html(fdint)
                    if(zcint>fdint){
                      $("#jieguo").html("通过")
                    }else if(zcint<fdint){
                      $("#jieguo").html("不通过")
                    }else {
                      $("#jieguo").html("平局")
                    }
                  }
                })

          })
          $(td2).append(a)
          $(tr).append(td1,td2)
          $("#table").append(tr)
        }
      }
    })


  /**
   * 查看投票详情
   */
  $("#ckxq").on("click",function(){
    $("#motak4").modal("show")
    $("#tabletoupiaolist tr:not(:first)").remove()
    $.ajax({
      url:"gettabletoupiaolist",
      type:"get",
      dataType:"json",
      data:{"sid":sid},
      success:function(data){
        console.log(data)
        for(let oj of data){
          let tr=document.createElement("tr")
          let td1=document.createElement("td")
          td1.innerText=oj.Subject_scontent
          let td2=document.createElement("td")
          td2.innerText=oj.Hname
          let td3=document.createElement("td")
          td3.innerText=oj.Htel
          let td4=document.createElement("td")
          if(oj.BAnswer_boolean =="t"){
            td4.innerText="赞成"
            td4.style.color="green"
          }else {
            td4.innerText="反对"
            td4.style.color="red"
          }
          $(tr).append(td1,td2,td3,td4)
          $("#tabletoupiaolist").append(tr)
        }
      }
    });


  });

  /**
   * 图形化数据
   * @param zc
   * @param fd
   */
  function tuxinghua(zc,fd) {
    var chartDom = document.getElementById('div1');
    chartDom.style.fontSize="25px";
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      title: {
        text: '微小区问卷投票结果演示图',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            {value: zc, name: '赞成'},
            {value: fd, name: '反对'}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    option && myChart.setOption(option);
  }
</script>
</html>